<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <!-- <el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion"
          size="small">添加</el-button>
        <el-input v-model="keyword" placeholder="分类名称" class="handle-input mr10" size="small"></el-input>
        <el-select v-model="code" placeholder="请选择竞价类型" size="small" class="mr10" @change="form.position=''">
            <el-option v-for="(item, index) in options" :key="item.id" :label="item.key" :value="item.id"></el-option>
          </el-select> -->
        <!-- <el-button type="primary" icon="el-icon-search" @click="getData" class="mr10" size="small">搜索</el-button> -->
      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
         v-loading="loading">
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="explain" label="内容"></el-table-column>
         <el-table-column label="时间" align="center">
          <template slot-scope="scope">
            {{ $clearTimer(scope.row.CreatedAt) }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    
  
  </div>
</template>

<script>
export default {
  name: 'basetable',
  data() {
    return {
      options: [{ key: '商品', id: 0 }, { key: '店铺', id: 1 }], // 下拉选项
      optionss: [{ key: '首页商品', id: 0 }, { key: '首页轮播', id: 1 }, { key: '商家联盟页面商品', id: 2 }, { key: '商家', id: 3 }],
      form: {
        code: 0,
        position: 0,
        url: '',
        img: '',
        goods_id: 0,
        money: 0
      },
      query: {
        pageIndex: 1,
        pageSize: 20
      },
      querys: {
        pageIndex: 1,
        pageSize: 20
      },
      upimg: {
        token: '',
        key: new Date().valueOf()
      },
      code: 0,
      upload: '',
      keyword: '',
      keywords: '',
      tableData: [],
      tableDatas: [],
      multipleSelection: [],
      editVisible: false,
      showboxgoods: false,
      pageTotal: 0,
      pageTotals: 0,
      imageUrl: '',
      type: 0,
      loading: false,
      templateSelection_ids: 0
    };
  },
  created() {
    
    this.getData()

  },
  methods: {
   
    
    //获取数据
    getData() {
      this.loading = true
      this.request('business/messageList/', 'get', { page: this.query.pageIndex, size: this.query.pageSize ,code:this.code}).then(res => {
        console.log(res)
        this.tableData = res.data.data
        this.pageTotal = res.data.total
        this.loading = false
      })
    },
    handlePageChanges(val) {
      this.$set(this.query1, 'pageIndex', val);
      this.getDatas();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    }

  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}</style>
